<template>
    <div id="container">
      <div id="viewDiv"></div>
      <el-main style="position:absolute;top:10px;left:20px;background-color:white;box-shadow:0 0 5px gray;
      border-radius:10px;line-height:40px;">
          <span style="vertical-align: middle;">缓冲距离:&nbsp;&nbsp;</span>
          <el-input style="width:100px;" placeholder="请输入缓冲距离" v-model="缓冲距离"></el-input>
          <span style="vertical-align: middle;">&nbsp;千米(km)</span><br/>
          <el-button @click="click('点')" type="primary">点</el-button><el-button @click="click('线')" type="primary">线</el-button>
          <el-button @click="click('面')" type="primary">面</el-button><el-button @click="click('清空')" type="danger">清空</el-button>
      </el-main>
     </div>
</template>
    
<script setup>
import {onMounted,ref} from 'vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView' 
import * as queryClass from '@arcgis/core/rest/query'
import  Query from '@arcgis/core/rest/support/Query'
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine'
var map,view,sketchViewModel,query
const 缓冲距离=ref(5)
var queryUrl = "https://ws8575.club/web/rest/services/Hosted/要素图层发布测试_前端渲染测试_3857/FeatureServer/0";//设置查询地址
const click=(event)=>{
  switch(event){
    case "清空":
      view.graphics.removeAll()
      sketchViewModel.cancel()
      break
    case "点":
      sketchViewModel.create('point', { mode: "click" })
      break
    case '线':
      sketchViewModel.create('polyline', { mode: "click" })
      break
    case "面":
      sketchViewModel.create('polygon', { mode: "click" })
      break
  }
}
onMounted(()=>{
  map = new Map({//创建地图对象
    basemap: {
        portalItem:{
            id:"0a8129ad171c403887397828be061a1d"
        }
    }
  })
  view = new MapView({
    map: map, container: "viewDiv", zoom: 12, center:[120.17,35.97]
  })
  view.ui.remove(["zoom","attribution"])
  sketchViewModel=new SketchViewModel({
    view:view,
    layer:view.graphics,
  })
  sketchViewModel.on("create", function (event) {//草图绘制完成的回调函数
    if (event.state === "complete") {
      view.graphics.removeAll()//先清空界面上的已有图形
      //创建创建的图形的缓冲图形,buffer方法的三个基础参数:原始几何,缓冲距离,缓冲单位
      var buffer_geometry=geometryEngine.buffer(event.graphic.geometry,缓冲距离.value,"kilometers")
      var graphic={//基于缓冲后的几何创建图形对象
        geometry:buffer_geometry,
        symbol:{
          type:"simple-fill",
          color:[0,0, 0, 0.25],
          style:"solid",
          outline:{
            color:[255,255,255],
            width:"1px",
            style:"solid"
          }
        }
      }
      query = new Query({//创建查询参数对象
        returnGeometry: true,
        outFields: ["*"],
        geometry:graphic.geometry
      })
      view.graphics.add(graphic)//首先在界面显示缓冲区几何图形对象
      queryClass.executeQueryJSON(queryUrl, query).then((featureSet)=>{//基于缓冲区几何执行查询
        var resultFeatures = featureSet.features//获取查询到的图形集合
        for (let feature of resultFeatures) {//遍历并向视图添加图形
          var graphic=feature
          graphic.symbol = {
            type:"simple-marker",
            color: [255, 0, 0, 0.5],
            outline:{
                width:"1px",
                color:[255,255,255],
            }
          }
          graphic.popupTemplate = {
            title:graphic.attributes.name,
            content:"地址: "+graphic.attributes.address
          }
          view.graphics.add(graphic)
        }
      })
    }
  })
})
</script>

<style scoped>
#container,#viewDiv{
  width:100%; height:100%; padding:0;margin:0;
}
</style>
  